<!-- ALL-设备巡检-巡检模板 -->
<template>
  <div>
    <div class="equip-wrap-common">
      <div v-show="showPage" class="equip-inspect-template-list-page">
        <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
          <px-row :gutter="16">
            <px-col :span="5">
              <px-form-item label="巡检项模板">
                <px-input
                  v-model="queryParams.temCodeOrName"
                  placeholder="请输入巡检项名称/编号"
                  autocomplete="off"
                  maxlength="50"
                  clearable
                  @blur="queryParams.temCodeOrName = $event.target.value.trim()"
                  @keyup.enter="queryTable"
                >
                  <template #suffix>
                    <px-icon style="cursor: pointer" @click="queryTable">
                      <search />
                    </px-icon>
                  </template>
                </px-input>
              </px-form-item>
            </px-col>
            <px-col :span="5">
              <EquipClassSelect :className="queryParams.className" @changeClassName="changeClassName" />
            </px-col>
            <px-col :span="5">
              <EquipSystemTree
                :className="queryParams.className"
                :systemCode="queryParams.systemCode"
                @changeAllSystemCodes="changeAllSystemCodes"
                @changeSystemCodes="changeSystemCodes"
                @clearSystem="clearSystem"
              />
            </px-col>
            <px-col :span="5">
              <px-form-item label="巡检内容">
                <px-select v-model="queryParams.inspectContentType" placeholder="请选择巡检内容" filterable clearable>
                  <px-option v-for="item in checkTargetList" :key="item.id" :label="item.label" :value="item.value" />
                </px-select>
              </px-form-item>
            </px-col>
            <px-col :span="4">
              <px-button type="primary" @click="queryTable">查询</px-button>
              <px-button @click="resetTable">重置</px-button>
            </px-col>
          </px-row>
        </px-form>
        <div class="equip-table-btn">
          <px-button v-has="'ALL_EQUIP_INSPECT_TEMPLATE_ADD_PAGE'" style="margin-right: 8px" type="primary" @click="handleAdd"
            >新增巡检项模板</px-button
          >
        </div>
        <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 303px)" border
          ><px-table-column label="序号" min-width="50" align="center" fixed="left">
            <template #default="{ $index }">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
            </template>
          </px-table-column>
          <px-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :label="item.label"
            :min-width="item.minWidth"
            :align="item.align"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          >
            <template v-if="item.prop === 'temCode'" #default="scope">
              <span
                v-if="isHasPermission('ALL_EQUIP_INSPECT_TEMPLATE_DETAIL_PAGE')"
                style="color: #3b82f6; cursor: pointer"
                @click="handleView(scope.row)"
                >{{ scope.row.temCode }}</span
              >
              <span v-else>{{ scope.row.temCode }}</span>
            </template>
            <template v-else #default="scope">
              <span>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
            </template>
          </px-table-column>
          <px-table-column fixed="right" label="操作" width="180" align="center">
            <template #default="scope">
              <px-tooltip append-to=".equip-inspect-template-list-page" content="详情" placement="top">
                <px-button v-has="'ALL_EQUIP_INSPECT_TEMPLATE_DETAIL_PAGE'" link type="primary" icon="Tickets" @click="handleView(scope.row)" />
              </px-tooltip>
              <px-tooltip append-to=".equip-inspect-template-list-page" content="编辑" placement="top">
                <px-button v-has="'ALL_EQUIP_INSPECT_TEMPLATE_EDIT_PAGE'" link type="primary" icon="EditPen" @click="handleEdit(scope.row)" />
              </px-tooltip>
              <px-tooltip append-to=".equip-inspect-template-list-page" content="复制" placement="top">
                <px-button v-has="'ALL_EQUIP_INSPECT_TEMPLATE_COPY_PAGE'" link type="primary" icon="CopyDocument" @click="handleCopy(scope.row)" />
              </px-tooltip>
              <px-tooltip append-to=".equip-inspect-template-list-page" content="删除" placement="top">
                <px-button v-has="'ALL_EQUIP_INSPECT_TEMPLATE_DELETE'" link type="danger" icon="Delete" @click="handleDelete(scope.row)" />
              </px-tooltip>
            </template>
          </px-table-column>
        </px-table>
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          class="equip-table-pagination"
          :total="total"
          @pagination="queryTable"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_EQUIP_INSPECT_TEMPLATE"
});
import { queryPage } from "@/api/equip/inspectTemplate";
import { isHasPermission } from "@/utils/auth";
import { stringTrimOfParams } from "@/utils/common";
import EquipClassSelect from "@/views/all/equip/components/EquipClassSelect.vue";
import EquipSystemTree from "@/views/all/equip/components/EquipSystemTree.vue";
// import { useAuth } from "@/views/all/equip/inspect/hooks";
import { computed, onActivated, onMounted, reactive, toRefs } from "vue";
import { onBeforeRouteLeave, useRoute } from "vue-router";
import { INSPECT_CONTENT } from "../config";
import { useAction } from "./hooks";
const route = useRoute();
const showPage = computed(() => {
  return route.path === "/all/equip/inspect/template";
});
// 离开本模块强制更新数据
onBeforeRouteLeave(to => {
  if (!to?.path?.includes("/all/equip/inspect/template/")) {
    resetTable();
  }
});

// const { isUpdator } = useAuth();
const actions = useAction();

// const showButton = data => {
//   const flag = isUpdator(data);
//   return flag;
// };
const state = reactive<any>({
  classNameList: [], // 科室下拉框
  systemList: [], // 系统下拉框
  categoryList: [], // 设备总称下拉框
  queryParams: {
    temCodeOrName: "",
    className: "",
    systemCode: "",
    inspectContentType: "",
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "temCode", label: "编号", minWidth: "140", showOverflowTooltip: true, fixed: "left" },
    { prop: "temName", label: "巡检项模板名称", minWidth: "180", showOverflowTooltip: true },
    { prop: "inspectContentTypeDesc", label: "巡检内容", minWidth: "80", showOverflowTooltip: true },
    { prop: "classNameDesc", label: "科室", minWidth: "60", showOverflowTooltip: true },
    { prop: "systemCodeDesc", label: "系统", minWidth: "120", showOverflowTooltip: true },
    { prop: "categoryDesc", label: "设备总称", minWidth: "140", showOverflowTooltip: true },
    { prop: "typeDesc", label: "设备类型", minWidth: "140", showOverflowTooltip: true },
    { prop: "inspectAreaDesc", label: "巡检区域", minWidth: "180", showOverflowTooltip: true },
    { prop: "updateName", label: "更新人", minWidth: "160", showOverflowTooltip: true },
    { prop: "updateTime", label: "更新时间", minWidth: "180", showOverflowTooltip: true }
  ],
  checkTargetList: INSPECT_CONTENT, // 基础信息巡检内容列表
  tableData: [],
  systemCodes: [],
  total: 0,
  pageRef: "",
  systemLoading: false
});
const { checkTargetList, systemCodes, queryParams, tableColumns, tableData, total } = toRefs(state);
// 外部封装好的组件
// 科室组件调用父组件
const changeClassName = val => {
  queryParams.value.className = val;
  queryParams.value.systemCode = "";
  systemCodes.value = [];
  queryParams.value.categoryId = null;
  queryParams.value.typeId = null;
  queryParams.value.modelId = null;
};
// 系统组件调用父组件
const changeSystemCodes = (val, val2) => {
  queryParams.value.systemCode = val;
  systemCodes.value = val2;
  queryParams.value.categoryId = null;
  queryParams.value.typeId = null;
  queryParams.value.modelId = null;
};
// 系统组件调用父组件
const changeAllSystemCodes = (val, val2, val3, val4) => {
  queryParams.value.className = val2;
  queryParams.value.systemCode = val3;
  systemCodes.value = val4;
  queryParams.value.categoryId = null;
  queryParams.value.typeId = null;
  queryParams.value.modelId = null;
};
// 系统组件值改变触发
const clearSystem = val => {
  queryParams.value.systemCode = "";
  systemCodes.value = [];
  queryParams.value.categoryId = null;
  queryParams.value.typeId = null;
  queryParams.value.modelId = null;
};
// 进入页面时触发
onMounted(() => {
  // queryClassNameSelect();
  queryTable();
});
// 缓存页面激活时触发
onActivated(() => {
  queryTable();
});
// 查询巡检清单
const queryTable = async () => {
  const { inspectContentType, ...others } = JSON.parse(JSON.stringify(queryParams.value));
  const params = { ...others, systemCodes: systemCodes.value, inspectContentTypes: inspectContentType ? [inspectContentType] : [] };
  const data = await queryPage(stringTrimOfParams(params));
  tableData.value = data.data;
  total.value = data?.total;
};
// 重置筛选条件和巡检清单
const resetTable = async () => {
  queryParams.value = {
    orderByColumn: "",
    isAsc: "",
    temCodeOrName: "",
    className: "",
    systemCode: "",
    inspectContentType: "",
    pageNum: 1,
    pageSize: 20
  };
  systemCodes.value = [];
  queryTable();
};
// 查看
const handleView = (row: any) => {
  actions.view(row);
};
// 添加
const handleAdd = () => {
  actions.add();
};
// 编辑
const handleEdit = (row: any) => {
  actions.edit(row);
};
// 复制巡检
const handleCopy = (row: any) => {
  actions.copy(row);
};
// 删除
const handleDelete = async (row: any) => {
  actions.delete(row, queryTable);
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
</style>
